<template>
	<view class="wallet">
		<view class="headtop">
			<view class="nr">
				<view class="title">押金充值</view>
				<view class="desc">充值后可随时租借</view>
			</view>
		</view>
		<view class="detail">
			<image :src="baseUrl + '/wximage/wallet_bj.png'" class="bj"></image>
			<view class="left">
				<view class="money">¥{{balance}}</view>
				<view class="name">钱包余额</view>
				<view class="money">¥{{freez_balance}}</view>
				<view class="name">授权冻结资金</view>
			</view>
			<view class="righttk clearfix" @click="topage('/pages/user/cashrecord')">
				<view class="title fl">退款记录</view>
				<image :src="baseUrl + '/wximage/wallet_right.png'" class="fl"></image>
			</view>
			<view class="right clearfix" @click="submit">
				<view class="title fl">秒退余额</view>
				<image :src="baseUrl + '/wximage/wallet_right.png'" class="fl"></image>
			</view>
		</view>
		<view class="banner">
			<image :src="baseUrl + '/wximage/wallet_banner.png'"></image>
		</view>
		<view class="shuoming">
			<view class="wenzi">1.充电宝归还并完成支付后，可在【个人中心押金】申请押金退还。</view>
			<view class="wenzi">2.申请押金退还后预计1~3个工作日退还至原支付账户，平均3分钟到账。</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				balance: '0.00',
				zsname: '',
				id_card: '',
				freez_balance: 0,
			}
		},
		onLoad() {
			let user_id = uni.getStorageSync('user_id');

			this.request({
				url: '/xcx/users',
				data: {
					id: user_id,
				},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					this.balance = res.data.data.balance;
					this.zsname = res.data.data.zsname;
					this.id_card = res.data.data.id_card;
					if(res.data.data.freez_balance != null){
						this.freez_balance = res.data.data.freez_balance;
					}
				}
			})
		},
		methods:{
			// 提现
			submit() {
				let txmoney = this.balance;
				
				if(txmoney == 0){
					uni.showToast({
						title: '退款金额需要大于0',
						icon: 'none'
					})
					return false;
				}
				
				// #ifdef MP-WEIXIN
				this.request({
					url: '/xcxmoney/cash',
					data: {
						users_id: uni.getStorageSync('user_id'),
						money: txmoney,
						role_id: '',
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '成功,请耐心等待',
							icon: 'none'
						})
						
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
				// #endif
				
				// #ifdef MP-ALIPAY
				if(this.zsname == '' || this.zsname == null){
					uni.showToast({
						title: '请先完善帐户信息'
					})
					
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/user/zhanghu'
						})
					},2000)
					
					return false;
				}
			
				this.request({
					url: '/alipay/cash',
					data: {
						users_id: uni.getStorageSync('user_id'),
						money: txmoney,
						role_id: '',
						name: this.name,
						id_card: this.id_card,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '成功,请耐心等待',
							icon: 'none'
						})
						
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					} else {
						uni.showToast({
							title: '失败，请稍后再试',
							icon: 'none'
						})
					}
				})
				// #endif
			},
			topage(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wallet {
		width: 100%;
		margin: 0 auto;
		padding: 0 40rpx;
		
		.headtop {
			width: 100%;

			.nr{
				margin-left: 20rpx;
				margin-top: 20rpx;
				
				.title{
					font-size: 48rpx;
					color: #333333;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				
				.desc{
					font-size: 48rpx;
					color: #333333;
					font-weight: 700;
				}
			}
		}
		
		.banner{
			width: 100%;
			margin: 0 auto;
			text-align: center;
			
			image{
				width: 100%;
				height: 520rpx;
			}
		}
		
		.detail{
			width: 100%;
			margin: 0 auto;
			margin-top: 50rpx;
			position: relative;
			
			.bj{
				width: 100%;
				height: 320rpx;
				display: flex;
			}
			
			.left{
				position: absolute;
				top: 0;
				left: 36rpx;
				
				.money{
					font-size: 52rpx;
					color: #FFFFFF;
					font-weight: 700;
					margin-top: 40rpx;
				}
				
				.name{
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			
			.right{
				position: absolute;
				top: 214rpx;
				right: 0;
				width: 190rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				background: #FFFFFF;
				
				image{
					width: 28rpx;
					height: 28rpx;
					margin-top: 17rpx;
					margin-left: 4rpx;
				}
				
				.title{
					margin-left: 46rpx;
					font-size: 24rpx;
					color: #00D6C0;
				}
			}
			
			.righttk{
				position: absolute;
				top: 50rpx;
				right: 0;
				width: 190rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				background: #FFFFFF;
				
				image{
					width: 28rpx;
					height: 28rpx;
					margin-top: 17rpx;
					margin-left: 4rpx;
				}
				
				.title{
					margin-left: 46rpx;
					font-size: 24rpx;
					color: #00D6C0;
				}
			}
		}
		
		.shuoming{
			width: 96%;
			margin: 0 auto;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			background: #F5FFFE;
			border-radius: 16rpx;
			margin-top: -40rpx;
			
			.wenzi{
				font-size: 26rpx;
				color: #424242;
				line-height: 50rpx;
			}
		}
	}
</style>